<template>
  <div class="highcharts_block">
    <div style="max-height: 240px;height: 240px;overflow-y: auto;border-bottom: 2px solid #ccc;margin-bottom: 20px;">
      <div id="highcharts2" style="padding: 0 20px;"></div>
    </div>
    <div style="height: 500px;overflow-y: auto;">
      <div id="highcharts1" style="padding: 0 20px;"></div>
    </div>
  </div>
</template>
<script>
  import Highcharts from "highcharts";
  import loadGantt from "highcharts/modules/gantt.js";
  loadGantt(Highcharts);
  import initOption from "./option.js"
  import initOption2 from "./option2.js"


  import httpSer from "@/http";
  export default {
    data() {
      return {};
    },
    created() { },
    mounted() {
      this.getChartData();
    },
    methods: {
      getChartData() {
        let p1 = httpSer.post('/project/getOne', { id: this.$route.query.id })
        let p2 = httpSer.post('/project/getProjectGantt', { id: this.$route.query.id })
        Promise.all([p1, p2]).then(([res1, res2]) => {
          let option = initOption(res1, res2)
          Highcharts.ganttChart("highcharts1", option)
          this.getCompare(res2)
        })
        
      },
      getCompare(data) {
        // let newData = data.filter(item => {
        //   return item.planStartDate && item.planEndDate
        // })
        // let plant = [];
        // let actual = [];
        // newData.forEach(item => {
        //   let obj = {
        //     name: item.name,
        //     start: item.planStartDate,
        //     end: item.planEndDate
        //   }
        //   plant.push(obj)

        //   let obj2 = {
        //     name: item.name,
        //     start: item.planStartDate,
        //     end: item.planEndDate
        //   }
        //   actual.push(obj2)
        // })
        let plant = [
          { name: '设计', start: '2019-09-01 00:00:00', end: '2019-09-05 00:00:00' },
          { name: '开发', start: '2019-09-07 00:00:00', end: '2019-09-08 00:00:00' },
          { name: '测试', start: '2019-09-08 00:00:00', end: '2019-09-12 00:00:00' },
          { name: '上线', start: '2019-09-12 00:00:00', end: '2019-09-15 00:00:00' },
        ];
        let actual = [
          { name: '设计', start: '2019-09-01 00:00:00', end: '2019-09-03 00:00:00' },
          { name: '开发', start: '2019-09-03 00:00:00', end: '2019-09-07 00:00:00' },
          { name: '测试', start: '2019-09-07 00:00:00', end: '2019-09-15 00:00:00' },
          { name: '上线', start: '2019-09-15 00:00:00', end: '2019-09-20 00:00:00' },
        ]
        let option = initOption2(plant, actual)
        Highcharts.ganttChart("highcharts2", option)
      }
    },
    filters: {},
    components: {}
  };
</script>

<style lang="less" scope>
  @import "./index.less";
</style>